import './TestItem.scss'
import { useNavigate } from 'react-router-dom';
import { useDispatch,useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';

function TestItem({info, onCheck, ifChecked, showUpdateModal}){
    const { user_status } = useSelector(state => state.user);
    const dispatch = useDispatch();
    const navigate = useNavigate();

    function editExam(){
        dispatch(setUserStatus({
            ...user_status,
            partid:info.partid
        }))
        navigate('/teacherexam');
    }

    
    function handleCheck(){
        onCheck(info.id);
    }



    return (
        <div className="TestItem">
            <input 
                type='checkbox' 
                onChange={handleCheck}
                checked={ifChecked||false}
            />
            <h1>第{info.partid}章测验</h1>
            <h2>截止时间:{info.part_ddl}</h2>
            <div className='test-scores'>
                <span className='total'>
                    总分：{info.total_points}
                </span>
            </div>
            <div className='test-btns'>
                <button 
                    className='join' 
                    onClick={editExam}
                >
                    编辑测验
                </button>
                <button 
                    className='check'
                    onClick={()=>{showUpdateModal(info.partid)}}
                >
                    编辑信息
                </button>
            </div>
        </div>
    )
}

export default TestItem;